<template>
	<view class="header">
		<image :src="userIfon.headPortrait"></image>
		<view class="followFans">
			<!-- 获赞/关注/粉丝 -->
			<view class="giveThumbsUpFans">
				<view hover-start-time=15 hover-stay-time=200 hover-class="bgcolor">
					<text>{{userIfon.giveThumbsUp}}</text>
					<text>获赞</text>
				</view>
				<view hover-start-time=15 hover-stay-time=200 hover-class="bgcolor">
					<text>{{userIfon.follow}}</text>
					<text>关注</text>
				</view>
				<view hover-start-time=15 hover-stay-time=200 hover-class="bgcolor">
					<text>{{userIfon.fans}}</text>
					<text>粉丝</text>
				</view>
			</view>
			<view class="follow" @tap="follow">关注</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			userIfon: {
				type: Object,
				default: null
			}
		},
		methods: {
			follow() {
				this.$emit("follow");
			},
		}
	}
</script>

<style lang="scss">
	.header {
		@include flexBetweenCenter;
		border-bottom: 2rpx solid #E9E9E9;
		height: 300rpx;
		padding: 0rpx 20rpx;

		>image {
			width: 180rpx;
			height: 180rpx;
			border-radius: 50%;
			margin-right: 40rpx;
		}

		>.followFans {
			flex: 1;
			display: flex;
			flex-direction: column;

			>.follow {
				@include flexCenterCenter;
				height: 90rpx;
				margin: 25rpx 0rpx 0rpx;
				background-color: #FF6159;
				border-radius: 20rpx;
				color: #FFFFFF;
				letter-spacing: 10rpx;
				font-size: 1.2rem;

				&:active {
					background-color: #FA3129 !important;
				}
			}
		}
	}

	.giveThumbsUpFans {
		@include flexCenterCenter;

		>view {
			padding: 10rpx;
			flex: 1;
			display: flex;
			flex-direction: column;

			>text {
				font-size: 1.2rem;
				text-align: center;

				&:last-of-type {
					color: #686669;
				}
			}
		}
	}
</style>
